// Ant Design
// ===============================
@ant-class: ant;
.@{ant-class} {
  // Button
  // ---
  &-btn {
    &:after {
      display: none; // 隐藏按钮的点击shadow
    }

    // Primary
    &-primary {
      &:hover:not(&-background-ghost):not(:disabled),
      &:focus:not(&-background-ghost):not(:disabled) {
        background-color: @color-important;
        border-color: @color-important;
      }

      &:disabled {
        &, &:hover, &:focus {
          background-color: @color-sky;
          border-color: @color-sky;
          color: @color-white;
          opacity: .7;
        }
      }
    }

    // Danger
    &-danger {
      &:hover:not(&-background-ghost):not(:disabled),
      &:focus:not(&-background-ghost):not(:disabled) {
        background-color: #D24B40;
        border-color: #D24B40;
      }

      &:disabled {
        &, &:hover, &:focus {
          background-color: @color-danger;
          border-color: @color-danger;
          color: @color-white;
          opacity: .7;
        }
      }
    }

    // 新增的皮肤
    &-dark {
      &, &:disabled {
        &, &:hover {
          background-color: @color-default;
          border-color: @color-default;
          color: @color-white;
        }
      }

      &:hover:not(&-background-ghost):not(:disabled),
      &:focus:not(&-background-ghost):not(:disabled) {
        background-color: #222;
        border-color: #222;
        color: @color-white;
      }

      &:disabled {
        opacity: .8;
      }
    }

    &-secondary {
      &, &:disabled {
        &, &:hover {
          background-color: @color-secondary;
          border-color: @color-secondary;
          color: @color-white;
        }
      }

      &:hover:not(&-background-ghost):not(:disabled),
      &:focus:not(&-background-ghost):not(:disabled) {
        background-color: #555;
        border-color: #555;
        color: @color-white;
      }

      &:disabled {
        opacity: .8;
      }
    }

    // Dark Ghost
    &-background-ghost&-dark {
      &:not(:disabled) {
        &, &:hover, &:focus {
          background-color: transparent;
          border-color: @color-secondary;
          color: @color-secondary;
        }

        &:hover, &:focus {
          border-color: @color-default;
          color: @color-default;
        }
      }

      &:disabled {
        background-color: #f4f4f4 !important;
        border-color: @color-lights;
        color: @color-secondary;
      }
    }

    // Secondary Ghost
    &-background-ghost&-secondary {
      &:not(:disabled) {
        & {
          background-color: transparent;
          border-color: @color-lights;
          color: @color-secondary;
        }
        &:hover, &:focus {
          background-color: @color-muted !important;
          border-color: @color-primary;
          color: @color-primary;
        }
      }

      &:disabled {
        &, &:hover, &:focus {
          background-color: transparent !important;
          border-color: @color-sky;
          color: @color-sky;
          opacity: .75;
        }
      }
    }

    // Primary Ghost
    &-background-ghost&-primary {
      &:not(:disabled) {
        &:hover, &:focus {
          background-color: #E8F0FF !important;
          border-color: @color-sky;
          color: @color-sky;
        }
      }

      &:disabled {
        &, &:hover, &:focus {
          background-color: transparent !important;
          border-color: @color-sky;
          color: @color-sky;
          opacity: .75;
        }
      }
    }

    // Danger Ghost
    &-background-ghost&-danger {
      &:not(:disabled) {
        &:hover, &:focus {
          background-color: #F8E8E7 !important;
          border-color: #D24B40;
          color: #D24B40;
        }
      }

      &:disabled {
        &, &:hover, &:focus {
          background-color: transparent !important;
          border-color: @color-danger;
          color: @color-danger;
          opacity: .75;
        }
      }
    }

    // Small Size
    &-sm {
      font-size: 12px;
      border-radius: 2px;
    }

    // Large Size
    &-lg {
      min-width: 80px;
      font-size: 14px;
    }
  }

  // Checkbox
  // ---
  &-checkbox {
    &:after {
      display: none;
    }
    &-inner {
      border-color: @color-sky;
      &:after {
        top: 5px;
        left: 2px;
        width: 7px;
        height: 11px;
      }
    }
    &-checked &-inner {
      &:after {
        transform: rotate(45deg) scale(.85) translate(-50%, -50%);
      }
    }
  }

  // Select
  // ---
  &-select {
    &-lg {
      font-size: 14px;
    }

    &-open &-selection,
    &-enabled &-selection {
      box-shadow: none;
    }

    &-dropdown {
      // margin-top: 6px;
      &-menu {
        padding: 12px 0;

        &-item {
          margin-bottom: 4px;
          padding: 0 22px;
          line-height: 30px;

          &:last-child {
            margin-bottom: 0;
          }

          &:hover:not(&-disabled)
          &:hover:not(&-disabled),
          &-selected:not(&-disabled) {
            font-weight: normal;
            color: @color-secondary;
          }
        }
      }
    }

    &-arrow-icon {
      &:after {
        display: block;
        font-family: "baai-iconfont";
        font-size: 12px;
        content: "\e7a2";
        color: @color-secondary;
        transition: transform .3s;
      }

      svg {
        display: none;
      }
    }

    &-open &-arrow-icon {
      &:after {
        transform: rotate(180deg);
      }
    }
  }

  // Input
  // ---
  &-input {
    &, &:hover, &:focus {
      box-shadow: none;
    }

    &-sm {
      border-radius: 3px;
    }

    &-lg {
      font-size: 14px;
    }
  }

  // Modal
  // ---
  &-modal {
    width: 315px;
    &-mask {
      background-color: rgba(0, 0, 0, .6);
    }

    &-body {
      padding: 40px 30px;
      text-align: center;
      font-weight: 500;
      font-size: 16px;
      line-height: 22px;
      color: @color-default;
    }

    &-footer {
      padding: 0 30px 40px;
      border-top: 0;
      text-align: center;

      .ant-btn {
        font-size: 18px;
        min-width: 80px;
        height: 32px;

        + button {
          margin-left: 20px;
        }
      }
    }
  }

  // 分页
  // ------
  &-pagination {
    // Mini size
    // ------
    &.mini {
      .ant-pagination {
        font-size: 12px;

        &-item,
        &-prev, &-next,
        &-jump-prev, &-jump-next {
          min-width: 30px;
          height: 30px;
          font-size: 12px;
          line-height: 30px;
          border: none;
        }

        &-disabled {
          &, a, a:hover {
            color: @color-secondary !important;
          }
        }

        &-prev, &-next {
          .anticon {
            position: relative;
            display: block;
            width: 100%;
            height: 100%;
            svg {
              display: none;
            }

            &:before {
              display: block !important;
              position: absolute;
              left: 0;
              right: 0;
              top: 0;
              bottom: 0;
              font-family: "baai-iconfont" !important;
              font-size: 12px;
              line-height: 30px;
              content: "\e799";
            }

            &-left {
              transform: rotate(180deg);
            }

            &-right {
              transform: rotate(0);
            }
          }
        }

        &-item,
        &-prev, &-next {
          a {
            padding: 0 8px;
            font-size: 12px;
          }

          &, a {
            color: @color-secondary;

            &:hover {
              background-color: transparent;
              color: @color-primary;
            }
          }

          &-active {
            background-color: transparent;
            &, a {
              color: @color-primary;
            }
          }

          &-ellipsis {
            font-size: 12px;
            letter-spacing: 1px;
            color: @color-secondary;
            transform: scale(.8);
          }
        }
      }
    }
  }

  // Tag
  // ---
  &-tag {
    &:after {
      display: none;
    }
  }
}


// Form
// ====================================
// 去除输入错误的边框样式
// ---
.has-error {
  &, &:hover {
    .ant {
      &-input {
        border-color: @input-border-color;

        &:hover, &:focus {
          box-shadow: none;
          border-color: @input-hover-border-color;
        }
      }
    }
  }
}


// Popover
// ====================================
.popover {
  .ant-popover {
    &-inner {
      box-shadow: 0 0 7px 1px rgba(0, 0, 0, .14);
      border-radius: 6px;
      &-content {
        padding: 0;
        color: @color-secondary;
      }
    }
  }

  .todos {
    padding: 10px 0;
    width: 122px;
  }
}


// Toast
// ===============================
.modal-toast {
  .anticon {
    display: none;
  }

  .ant-modal {
    min-width: 315px;

    &-mask {
      opacity: 0;
    }

    &-content {
      background-color: rgba(0, 0, 0, .6);
    }


    &-body {
      padding: 30px;
    }

    &-confirm {
      &-title,  &-btns {
        display: none;
      }
      &-content {
        margin: 0 !important;
        font-weight: 500;
        font-size: 16px;
        line-height: 20px;
        color: @color-white;
      }
    }
  }
}


// 文本颜色
// ===============================
.text {
  &-black {
    color: @color-default;
  }

  &-secondary {
    color: @color-secondary;
  }

  &-silver {
    color: @color-silver;
  }

  &-clouds {
    color: @color-clouds;
  }

  &-concrete {
    color: @color-concrete;
  }

  &-lights {
    color: @color-lights;
  }

  &-muted {
    color: @color-muted;
  }

  &-white {
    color: @color-white;
  }

  &-important {
    color: @color-important;
  }

  &-sky {
    color: @color-sky;
  }

  &-primary {
    color: @color-primary;
  }

  &-golden {
    color: @color-golden;
  }

  &-danger {
    color: @color-danger;
  }
}


// 文本链接
// ===============================
.link {
  &-default {
    .anim-color();
    color: @color-default;
    &:hover {
      text-decoration: underline;
    }
  }

  &-secondary {
    .anim-color();
    color: @color-secondary;
    &:hover {
      color: @color-default;
    }
  }

  &-primary {
    .anim-color();
    color: @color-primary;
    &:hover {
      color: @color-important;
    }
  }

  &-silver {
    .anim-color();
    color: @color-silver;
    &:hover {
      color: @color-default;
    }
  }

  &-inverse {
    .anim-color();
    color: @color-default;
    &:hover {
      color: @color-important;
    }
  }
}


// .mention-item {
//   padding: 4px 10px;
//   border-radius: 4px;
// }

// .mention-selected {
//   background: rgb(192, 250, 153);
// }
.m-mention-item {
  .flex(row,flex-start,center);
  height: 42px;
  width:180px;
  img{
    width:32px;
    height:32px;
    margin-right: 9px;
  }
  &>div{
    flex: 1;
    width: 140px;
    p{
      margin:0;
      font-size: 14px;
      line-height: 18px;
      color: #333;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    span{
      display: block;
      font-size: 12px;
      color: #999;
      line-height: 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
